<template>
    <view class="clone" style="background-color: #E4EBE9;">
        <view class="topnav">
            <image :src="imageUrl + '/wde/wdeGroup-281-1.png'" class="topnv-image" @click="getfh"></image>
            <text class="topnv-biaoti">我的点赞</text>
        </view>
        <view class="top-nav">
            <view
                class="top-nav-view"
                v-for="(item, index) in navItems"
                :key="index"
                :class="{ active: index === currentIndex }"
                @tap="currentIndex = index"
            >
                {{ item }}
                <view class="underline" :style="{ backgroundColor: index === currentIndex? '#697E71' : underlineColor }"></view>
            </view>
        </view>
		<view class="content-box">
		      <block v-for="item in getContent(currentIndex)" :key="item.text">
		        <image :src="item.imageSrc" style="width:50px;height:50px;float:left;margin-right:10px;"></image>
		        <text>{{ item.text }}</text>
		      </block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageUrl: this.$imageUrl,		
				navItems: ['云上展馆', '探索发现', '公益教育','文创艺术', '特色物产'],
				currentIndex: 0,
				underlineColor: ' #D3D3D3',
				 contents: [
				    {
				    items: [
				        {
				        imageSrc: 'https://xnlv.lizxx.com/image/xnlv/static/wde/wdeGroup-859.png',
				         text: '永顺莓茶\n'
				        },
				        {
				        imageSrc: 'https://xnlv.lizxx.com/image/xnlv/static/wde/wdeimage-49580.png',
				         text: '永顺黑山羊\n'
				        }
				    ]
				    },
					{
					items: [
					    {
					    imageSrc: 'https://xnlv.lizxx.com/image/xnlv/static/wde/wdeGroup-859.png',
					    text: '探索发现的内容 1\n',
					    },
					    {
					    imageSrc: 'https://xnlv.lizxx.com/image/xnlv/static/wde/wdeimage-49580.png',
					     text: '探索发现的内容 2\n',
					    }
					]
					},
					{
					items: [
					    {
					    imageSrc: 'https://xnlv.lizxx.com/image/xnlv/static/wde/wdeGroup-859.png',
					    text: '公益教育的内容 1\n',
					    },
					    {
					    imageSrc: 'https://xnlv.lizxx.com/image/xnlv/static/wde/wdeimage-49580.png',
					     text: '公益教育的内容 2\n',
					    }
					]
					},
					{
					items: [
					    {
					    imageSrc: 'https://xnlv.lizxx.com/image/xnlv/static/wde/wdeGroup-859.png',
					    text: '文创艺术的内容 1\n',
					    },
					    {
					    imageSrc: 'https://xnlv.lizxx.com/image/xnlv/static/wde/wdeimage-49580.png',
					     text: '文创艺术的内容 2\n',
					    }
					]
					},
					{
					items: [
					    {
					    imageSrc: 'https://xnlv.lizxx.com/image/xnlv/static/wde/wdeGroup-859.png',
					    text: '特色物产的内容 1\n',
					    },
					    {
					    imageSrc: 'https://xnlv.lizxx.com/image/xnlv/static/wde/wdeimage-49580.png',
					     text: '特色物产的内容 2\n',
					    }
					]
					},
				]
			}
		},
	methods: {
	    getContent(index) {
	      const content = this.contents[index];
	      if (content) {
	        return content.items;
	      }
	      return [];
	    },
		getfh(){
			wx.redirectTo({
			  url: '/pagesNew/pages-my/pages-my',
			});
		}
	  },
	};
	</script>

<style>
.clone{
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
}
.topnav{
	width: 100%;
	height: 50rpx;
	display: flex;
	margin-top: 13%;
}
.topnv-image{
	width: 38rpx;
	height: 38rpx;
	margin-top: 1%;
	margin-left: 3%;
}
.topnv-biaoti{
	width: 128rpx;
	height: 48rpx;
	margin-top: 1%;
	margin-left: 35%;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 32rpx;
	color: #3F5649;
	line-height: 38rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.top-nav {
    display: flex;
    overflow-x: scroll;
    white-space: nowrap;
    padding: 10px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
}
.top-nav::-webkit-scrollbar {
    display: none;
}
.top-nav-view {
    padding: 10px;
    min-width: 80px;
    text-align: center;
	color: #C0C0C0;
	position: relative;
	width: 120px; // 设置一个固定宽度，根据实际情况调整
}
.underline {
    position: absolute;
    bottom: -2px; // 微调位置，确保与导航项底部对齐
    left: 0;
    width: 100%;
    height: 2px;
}
.top-nav-view.active {
   color: #697E71;
}
.content-box {
    padding-top: 20rpx;
    padding-left: 50rpx;
    font-size: 18px;
    line-height: 4;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 5px;
    white-space: pre-line; /* 允许换行显示 */
}

</style>
